<!--
应用详情
 -->
<template>
  <div class="app-container paddingT50">
    <div class="paddingLR20 clearfix">
      <el-card shadow="never" class="oper-btn-card">
        <div class="clearfix">
          <div class="fl">
            <el-button type="default" size="medium" @click="btnCancle">关闭</el-button>
          </div>
        </div>
      </el-card>
    </div>
    <el-card shadow="never" class="border-radius-none margin-t2">
      <!-- dataObj: {{ dataObj }} -->
      <div class="paddingTb20 ">
        <el-descriptions title="应用信息" direction="vertical" :column="3" border>
          <el-descriptions-item label="应用名称"> {{ formData.name }}</el-descriptions-item>
          <el-descriptions-item label="APPID"> {{ formData.appid }}
          </el-descriptions-item>
          <el-descriptions-item label="SECRET">
            <el-tag size="small" v-on:click="show()">点击查看</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="公钥">
            <el-tag style="width: 200px">{{ formData.pubKey }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="扩展信息"> {{ formData.parameters }}
          </el-descriptions-item>
          <el-descriptions-item label="应用图标">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
    <el-dialog title="安全认证" :visible.sync="dialogFormVisible">
      <el-form :model="dialogFormData">
        <el-form-item label="输入密码" :label-width="formLabelWidth" v-show="dialogPasswordFormVisible">
          <el-input v-model="dialogFormData.password" show-password autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="secret" :label-width="formLabelWidth" v-show="dialogSecretFormVisible">
          <el-input v-model="dialogFormData.secret" readonly></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="showSecret()" v-show="dialogPasswordFormVisible">确 定</el-button>
        <el-button type="primary" @click="dialogFormVisible = false" v-show="!dialogPasswordFormVisible">关闭</el-button>

      </div>
    </el-dialog>
  </div>

</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { findApplicationById, showSecret } from '@/api/application/application.js'

export default {
  components: { },
  name: 'SysApplicationDetail',
  mixins: [oftenuse],
  props: {
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      dialogPasswordFormVisible: true,
      dialogSecretFormVisible: false,
      formLabelWidth: '60px',
      imageUrl: '',
      formData: {
        appid: null,
        name: null,
        secret: null,
        icon: null
      },
      dialogFormData: {
        password: '',
        secret: ''
      },
      rules: {}
    }
  },
  computed: {},
  watch: {},
  created() {
    // 页面初始化数据写在这里
    this.initData()
  },
  methods: {
    jump2list() {
      this.closeCurrentTag(this.$route)
      this.$router.push({
        name: 'sysApplicationList',
        params: { refresh: true }
      })
    },
    btnCancle() {
      this.jump2list()
    },
    findById(id) {
      findApplicationById({ id: id }).then(res => {
        if (res.data.flag) {
          this.formData = res.data.result
          this.imageUrl = res.data.result.icon
        } else {
          this.$notify.error({ title: '查询失败!', message: res.data.message })
        }
      })
    },
    show() {
      this.dialogFormVisible = true
    },
    showSecret() {
      const id = this.id
      showSecret({ id: id, password: this.dialogFormData.password }).then(res => {
        if (res.data.flag) {
          this.dialogFormData.secret = res.data.result
          this.dialogSecretFormVisible = true
          this.dialogPasswordFormVisible = false
        } else {
          this.$notify.error({ title: '查询失败!', message: res.data.message })
        }
      })
    },
    initData() { // 初始化数据
      const id = this.id
      if (id) {
        // 初始化修改时的数据
        this.findById(id)
      }
    }
  }
}
</script>

<style scoped>
.el-tag{
  white-space: normal;
  height:auto;
}
</style>
